<template>
	<view>
		<block v-if="isload">
			<view class="container">
				<view class="header">
					<view class="d-pic">
						<image :src="detail.pic"></image>
					</view>
					<view class="title">{{ detail.partyname }}</view>

					<view class="d-starttime">
						<image src="../../static/img/party-user.png"></image>
						聚会地点：{{ detail.address || '' }}
					</view>

					<view class="d-starttime">
						<image src="../../static/img/party-time.png"></image>
						开始时间：{{ detail.starttime }}
					</view>
					<view class="d-starttime">
						<image src="../../static/img/party-time.png"></image>
						结束时间：{{ detail.endtime }}
					</view>
					<view class="d-starttime" v-if="detail.partytype == 1">
						<image src="../../static/img/party-type.png"></image>
						聚会类型：男AA女免单
					</view>
					<view class="d-starttime" v-if="detail.partytype == 2">
						<image src="../../static/img/party-type.png"></image>
						聚会类型：AA制
					</view>
					<view class="d-starttime" v-if="detail.partytype == 3">
						<image src="../../static/img/party-type.png"></image>
						聚会类型：主办方
					</view>
					<view class="d-starttime" v-if="detail.partytype == 4">
						<image src="../../static/img/party-type.png"></image>
						聚会类型：其他
					</view>

					<view class="d-starttime">
						<image src="../../static/img/party-user.png"></image>
						聚会人数：{{ detail.number }}
					</view>

					<view class="d-starttime">
						<image src="../../static/img/party-user.png"></image>
						已报名人数：{{ detail.applycount }}
					</view>

					<view class="d-starttime">
						<image src="../../static/img/party-company.png"></image>
						发起公司：{{ detail.company }}
					</view>
					<view class="d-starttime">
						<image src="../../static/img/party-zhiwei.png"></image>
						职位：{{ detail.position }}
					</view>
					<view class="d-starttime">
						<image src="../../static/img/party-ziyuan.png"></image>
						想要资源：{{ detail.want_resources }}
					</view>
					<view class="d-starttime">
						<image src="../../static/img/party-ziyuan.png"></image>
						自有资源：{{ detail.own_resources }}
					</view>

					<view class="d-starttime">
						<image src="../../static/img/party-ziyuan.png"></image>
						聚会内容：{{ detail.content || '' }}
					</view>

					<view class="apply-btn">
						<view class="apply-add" @click="addapply(detail.id)">聚会报名</view>
						<view class="apply-view" @click="makephone()">电话联系</view>
					</view>
				</view>
				<view class="apply-list">
					<view class="apply-list-bg"></view>
					<view class="apply-list-title">已报名的聚友</view>
				</view>
				<view v-if="applylist.length > 0">
					<view class="party-itemlist" v-for="(item, index) in applylist" :key="item.id">
						<view class="party-pic">
							<image class="image" :src="item.headimg" mode="widthFix" />
						</view>
						<view class="party-info">
							<view class="p1">
								{{ item.nickname }}
								<image v-if="item.applysex == 1" :src="static_url + '/static/img/ag_team.png'"
									class="applysex"></image>
								<image v-if="item.applysex == 2" :src="static_url + '/static/img/girl.png'"
									class="applysex"></image>
							</view>
							<view class="creattime">{{ item.creattime }}</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,
			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,

			detail: [],
			datalist: [],
			pagenum: 1,
			id: 0,
			pagecontent: "",
			title: "",
			sharepic: "",
			nodata: false,
			nomore: false,

			applylist: []
		};
	},
	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.getdata();
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	onShareAppMessage: function () {
		var that = this;
		return this._sharewx({
			title: this.detail.partyname,
			desc: this.detail.partyname,
			pic: this.detail.pic,
			callback: function () {
				that.sharecallback();
			}
		});
	},
	onShareTimeline: function () {
		var that = this;
		var sharewxdata = this._sharewx({
			title: this.detail.partyname,
			desc: this.detail.partyname,
			pic: this.detail.pic,
			callback: function () {

			}
		});
		var query = (sharewxdata.path).split('?')[1] + '&seetype=circle';
		return {
			title: sharewxdata.title,
			imageUrl: sharewxdata.imageUrl,
			query: query
		}
	},
	onReachBottom: function () {
		if (!this.nodata && !this.nomore && this.detail.canpl == 1) {
			this.pagenum = this.pagenum + 1
			//this.getpllist();
		}
	},
	methods: {
		getdata: function () {
			var that = this;
			var id = that.opt.id;
			that.loading = true;
			app.get('party/detail', {
				id: id
			}, function (res) {
				that.loading = false;
				that.isload = true
				that.detail = res.detail;
				that.title = res.detail.partyname;
				that.sharepic = res.detail.pic;

				that.applylist = res.applylist
				uni.setNavigationBarTitle({
					title: res.detail.partyname
				});
			});
		},
		makephone: function (e) {
			var that = this;
			uni.makePhoneCall({
				phoneNumber: that.detail.contractmobile,
				fail: function () { }
			});
		},
		addapply(id) {
			//查询用户信息
			var that = this
			app.get('My/usercenter', {}, function (data) {
				console.log(data);
				var memberinfo = data.memberinfo
				if (memberinfo.is_defalut == 1) {
					app.error('您的等级不允许报名，请先升级到plus会员');
					setTimeout(function () {
						uni.navigateTo({
							url: "/pagesExt/my/levelpay"
						})
					}, 1000);
				} else {
					uni.navigateTo({
						url: "/pagesExt/party/apply?pid=" + id
					})
				}
			});

		}
	}
};
</script>
<style>
.header {
	background-color: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
}

.d-pic image {
	width: 100%;
	height: 360rpx;
}

.header .title {
	width: 100%;
	font-size: 28rpx;
	color: #010101;
	font-weight: bold;
	padding: 20rpx 30rpx;
}

.header .artinfo {
	width: 100%;
	font-size: 28rpx;
	color: #8c8c8c;
	font-style: normal;
	overflow: hidden;
	display: flex;
	margin: 10rpx 0;
}

.header .artinfo .t1 {
	padding-right: 8rpx
}

.header .artinfo .t2 {
	color: #777;
	padding-right: 8rpx
}

.header .artinfo .t3 {
	text-align: right;
	flex: 1;
}

.header .subname {
	width: 100%;
	font-size: 28rpx;
	color: #888;
	border: 1px dotted #ddd;
	border-radius: 10rpx;
	margin: 10rpx 0;
	padding: 10rpx
}

.party-itemlist {
	display: flex;
	align-items: center;
	position: relative;
	/* margin-bottom: 12rpx; */
	padding: 20rpx 20rpx;
	background: #fff;
}

.party-itemlist .party-pic {
	width: 80rpx;
	height: 80rpx;
	overflow: hidden;
	background: #ffffff;
	position: relative;
}

.party-itemlist .party-pic .image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

.party-itemlist .party-info {
	width: 65%;
	height: auto;
	overflow: hidden;
	padding: 0 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.party-itemlist .party-info .p1 {
	color: #222222;
	font-weight: bold;
	font-size: 28rpx;
	line-height: 46rpx;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: 92rpx;
	align-items: center;
}

.party-itemlist .party-info .price {
	color: #eb544d;
	font-size: 28rpx;
	font-weight: bold;
}

.party-itemlist .party-info .p2 {
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 24rpx;
	color: #a88;
	overflow: hidden;
	padding-bottom: 6rpx
}

.d-starttime {
	display: flex;
	align-items: center;
	padding: 12rpx 20rpx;
}

.d-starttime image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 12rpx;
}

.apply-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 40rpx;
}

.apply-add {
	color: #fff;
	background: #ba1f25;
	padding: 18rpx 46rpx;
	border-radius: 38rpx;
	width: 44%;
	text-align: center;
}

.apply-view {
	color: #fff;
	background: #e99e44;
	padding: 18rpx 46rpx;
	border-radius: 38rpx;
	width: 44%;
	text-align: center;
}

.apply-list {
	background-color: #fff;
	height: 100rpx;
	line-height: 100rpx;
	padding: 0rpx 30rpx;
	margin: 20rpx 0rpx 0rpx 0rpx;
	display: flex;
	align-items: center;
}

.apply-list-bg {
	height: 42rpx;
	width: 16rpx;
	border-radius: 24rpx;
	background: #ba1f25;
	margin-right: 16rpx;
}

.apply-list-title {
	color: #010101;
	font-size: 28rpx;
	font-weight: bold;
}

.creattime {
	font-size: 24rpx;
	color: #666;
}

.applysex {
	width: 32rpx;
	height: 32rpx;
	margin-left: 12rpx;
}
</style>